<style scoped>
    li{
        list-style: none;
        line-height: 50px;
        padding:0 25px ;
        margin-left: -2px;
        border: 2px #666 solid;

    }
    ul{
        display: flex;
       justify-content: center;
    }
    .act{
        background-color: blue;
           color: white; 
    }
    .ps1{
        display: none;
    }
    .ps2{
        display: block;
    }
    .box{
        width: 400px;
        height: 300px;
        line-height: 300px;
        border: 1px solid black;
        margin-top: -16px;
        margin-left: 664px;
        
    }
</style>
<template>
    <div>
    <div>
        <ul>
            <li  v-for="(item, index) in tab":key="index" @click="handle(index)" :class="cur == index ? 'act':''">
               <p>{{ item.head }}</p>
            </li>
        </ul>
    </div>
    <div class="box" v-for="(item, index) in tab":key="index" @click="handle(index)" :class="cur == index ? 'ps2':'ps1'">
        <span>{{ item.body }}</span>
    </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                cur:0,//记录点击第几个
                tab:[
                    {
                        head:"孙悟空",
                        body:"一二三四五"
                    },
                    {
                        head:"大闸蟹",
                        body:"上山打老虎"
                    },
                    {
                        head:"猪八戒",
                        body:"老虎打不着"
                    },
                    {
                        head:"锅包肉",
                        body:"打着小松鼠"
                    },
                ],
            }
        },
        methods:{
            handle(index){
                this.cur =index
            }
        }
    }
</script>